<template>
  <div class="home" ref="home" @scroll.passive="homeScroll">
    <div class="top-search-box">
      <div class="left-box">
        <div class="text-sign">签到</div>
      </div>
      <div class="center-box">
        <van-icon name="search" />
        <input
          type="text"
          v-model="keywords"
          placeholder="搜索糗事"
          @keydown.enter="searchHandel"
        />
      </div>
      <div class="right-box"></div>
    </div>
    <van-tabs
      v-model="active"
      color="rgb(249, 217, 50)"
      line-width="32px"
      title-active-color="#000"
      @click="changeRouter"
    >
      <van-tab
        :title="item.title"
        v-for="(item, index) in tabbarData"
        :key="index"
      >
      </van-tab>
    </van-tabs>
    <div class="go-back-to-top" @click="goToTop" v-if="goToTopIconState">
      <van-icon name="arrow-up" /><br />返回<br />顶部
    </div>
    <keep-alive>
      <router-view :scrollTop="scrollTop"></router-view>
    </keep-alive>
  </div>
</template>

<script>
import { throttle } from "@/utils/throttle";
export default {
  name: "HomeView",
  data() {
    return {
      //顶部导航栏激活下标
      active: 1,
      //顶部导航栏数据
      tabbarData: [
        {
          title: "关注",
          name: "FollowView",
        },
        {
          title: "推荐",
          name: "RecommendView",
        },
        {
          title: "视频",
          name: "VideoView",
        },
        {
          title: "纯文",
          name: "ArticleView",
        },
        {
          title: "纯图",
          name: "PhotoView",
        },
        {
          title: "精华",
          name: "EssenceView",
        },
        {
          title: "爆社",
          name: "BombSquadView",
        },
      ],
      //返回顶部的按钮显示状态
      goToTopIconState: false,
      //home的滚动距离
      scrollTop: 0,
      //保存到本地的关注数据
      followedData: [],
      followedData2: [],
      //搜索关键词
      keywords: "",
    };
  },
  watch: {
    $route() {
      this.active = Number(window.localStorage.getItem("homeActiveIndex"));
    },
  },
  created() {
    //刷新时根据路由激活下标
    this.active = Number(window.localStorage.getItem("homeActiveIndex"));
    this.getFollowedData();
  },
  activated() {
    this.tabbarData.forEach((item, index) => {
      if (index == this.active) {
        this.$router.push({ name: item.name });
      }
    });
  },
  methods: {
    //返回顶部方法
    goToTop() {
      this.$refs.home.scrollTo(0, 0);
    },
    //home的滚动方法
    homeScroll: throttle(function () {
      this.scrollTop = this.$refs.home.scrollTop;
      if (this.$refs.home.scrollTop >= 150) {
        this.goToTopIconState = true;
      } else {
        this.goToTopIconState = false;
      }
    }, 500),
    //二级路由切换
    changeRouter() {
      window.localStorage.setItem("homeActiveIndex", this.active);
      this.tabbarData.forEach((item, index) => {
        if (index == this.active) {
          this.$router.push({ name: item.name });
        }
      });
    },
    //获取关注列表
    getFollowedData() {
      let followedData = JSON.parse(
        window.localStorage.getItem("followedData")
      );
      if (!followedData) {
        window.localStorage.setItem(
          "followedData",
          JSON.stringify(this.followedData)
        );
      } else {
        this.followedData = followedData;
      }

      //爆社关注
      let followedData2 = JSON.parse(
        window.localStorage.getItem("followedData2")
      );
      if (!followedData2) {
        window.localStorage.setItem(
          "followedData2",
          JSON.stringify(this.followedData2)
        );
      } else {
        this.followedData2 = followedData2;
      }
    },
    //搜索方法
    searchHandel() {
      if (this.keywords != "" && this.keywords.length > 0) {
        this.$router.push({
          name:'SearchView',
          params:{
            keywords:this.keywords
          },
        })
      }
      this.keywords=''
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  padding: 10px 10px 0;
  box-sizing: border-box;
  .top-search-box {
    width: 100vw;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 50;
    padding-left: 10px;
    padding-top: 10px;
    background-color: #fff;
    box-sizing: border-box;
    .left-box {
      width: 60px;
      height: 30px;
      border-radius: 999px;
      background-image: url(../../assets/images/home/mfz.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      position: relative;
      .text-sign {
        position: absolute;
        right: 7px;
        font-weight: 600;
        top: 10px;
        font-size: 14px;
      }
    }
    .center-box {
      width: 200px;
      height: 35px;
      border-radius: 5px;
      background-color: #eee;
      display: flex;
      position: relative;
      font-size: 14px;
      margin-left: -20px;
      .van-icon-search {
        line-height: 35px;
        position: absolute;
        left: 55px;
      }
      input {
        background-color: #eee;
        width: 100px;
        margin: 0 auto;
        text-align: center;
      }
    }
    .right-box {
      width: 65px;
      height: 30px;
      background-color: red;
      border-radius: 999px;
      overflow: hidden;
      background-image: url(../../assets/images/home/3y6.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      position: relative;
      left: -20px;
    }
  }
  .go-back-to-top {
    width: 70px;
    height: 70px;
    font-size: 20px;
    background-color: rgb(255, 223, 51);
    text-align: center;
    line-height: 20px;
    border-radius: 999px;
    position: fixed;
    right: -7px;
    bottom: 90px;
    transform: scale(0.5);
    z-index: 99;
  }
}
</style>
